<template>
	<scroll-view class="scroll-view" refresher-enabled scroll-y :refresher-triggered="isTriggered" @scrolltolower="onScrollToLower" @refresherrefresh="onScrollViewRefresh">
	  <view class="content">
		<view class="container">
		  <uni-card class="top" v-for="notify in notifyList" :key="notify.id" :border="false" :is-shadow="false">
			<view class="order">
			  <text class="state">订单状态: {{ getStatusText(notify.status) }}</text>
			</view>
			<view class="time">标题:{{ notify.title }}</view>
			<view class="time">订单号:{{ notify.id }}</view>
			<view class="time">类型:{{ notify.type }}</view>
			<view class="details">
			  <view class="time">创建时间:{{ notify.createdAt }}</view>
			  <navigator hover-class="none" class="particulars" :url="`/subpkg_order/particulars/particulars?id=${notify.id}`">查看详情</navigator>
			</view>
		  </uni-card>
		  <view v-if="isEmpty" class="message-blank">暂无消息</view>
		</view>
	  </view>
	</scroll-view>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import messageApi from '@/api/order'
  
  // 通知列表数据
  const notifyList = ref([])
  // 下一页页码
  const nextPage = ref(1)
  // 是否为空列表
  const isEmpty = ref(false)
  // 是否还有更多数据
  const hasMore = ref(true)
  // 是否加载完成
  const isTriggered = ref(false)
  
  // 生命周期
  onMounted(() => {
	getNotifyList()
  })
  
  // 获取通知状态文本
  function getStatusText(status) {
	switch (status) {
	  case 0:
		return '待支付'
	  case 1:
		return '已支付'
	  case 2:
		return '服务中'
	  case 3:
		return '已完成'
	  case 4:
		return '已取消'
	  case 5:
		return '退款中'
	  case 6:
		return '已退款'
	  default:
		return ''
	}
  }
  
  // 上拉刷新
  async function onScrollToLower() {
	if (!hasMore.value) return
	await getNotifyList(nextPage.value)
  }
  
  // 下拉刷新
  async function onScrollViewRefresh() {
	isTriggered.value = true
	await getNotifyList()
	isTriggered.value = false
  }
  
  // 获取通知列表数据
  async function getNotifyList(currentPage = 1, pageSize = 5) {
	// 请求接口获取数据
	const res = await messageApi.sheetList(currentPage, pageSize)
  
	// 检查接口调用是否成功
	if (res.code !== 200) {
	  uni.utils.toast('获取通知失败，请稍后重试!')
	  return
	}
  
	// 清空原始数据
	if (currentPage === 1) {
	  notifyList.value = []
	}
  
	// 更新下一页页码和是否还有更多数据的状态
	nextPage.value = res.data.currentPage + 1
	hasMore.value = nextPage.value <= res.data.pageSize
  
	// 将新数据添加到notifyList中
	notifyList.value = [...notifyList.value, ...(res.data.data)]
  
	// 是否为空列表
	isEmpty.value = notifyList.value.length === 0
  }
  </script>
  
  <style>
  .content {
	height: 100%;
  }
  
  .container {
	width: 100%;
	border-radius: 10px;
  }
  
  .uni-card {
	width: 85%;
	background-color: #e9f3fe !important;
  }
  
  .order {
	display: flex;
	justify-content: space-between;
	color: #8fabef;
  }
  
  .state {
	color: #225afd;
	padding-bottom: 10px;
  }
  
  .time {
	color: #7a7b75;
	font-size: 12px;
  }
  
  .details {
	display: flex;
	justify-content: space-between;
  }
  
  .particulars {
	color: #fff;
	width: 100px;
	background-color: #8bc34a;
	text-align: center;
	border-radius: 50px;
	margin-bottom: 10px;
	margin-right: 10px;
  }
  </style>
  